<template>
    <teleport to="#toast-container1" v-if="show">
      <div class="toast-container1">
        内容1
      </div>
    </teleport>
    <teleport to="#toast-container2" v-if="show">
      <div class="toast-container2">
        内容2
      </div>
    </teleport>
    <van-button type="primary" @click="openDialog">移动</van-button>


    <van-form :model="loginData.submitForm"  ref="submitForm">
      <van-cell-group inset>

        <van-collapse v-model="activeNames" :accordion="accordion">
          <van-collapse-item title="进行正则校验" name="1">


            <!-- 通过 pattern 进行正则校验 -->
            <van-field
                v-model="loginData.submitForm.value1"
                name="pattern"
                placeholder="正则校验"
                :rules="[{ pattern, message: '请输入正确内容' }]"

            />
          </van-collapse-item>
          <van-collapse-item title="进行函数校验" name="2">
            <!-- 通过 validator 进行函数校验 -->
            <van-field
                v-model="loginData.submitForm.value2"
                name="validator"
                placeholder="函数校验"
                :rules="[{ validator, message: '请输入正确内容'}]"
            />
          </van-collapse-item>
          <van-collapse-item title="返回错误提示" name="3">
            <!-- 通过 validator 返回错误提示 -->
            <van-field
                v-model="loginData.submitForm.value3"
                name="validatorMessage"
                placeholder="校验函数返回错误提示"
            />
          </van-collapse-item>
          <van-collapse-item title="进行异步函数校验" name="4">

            <!-- 通过 validator 进行异步函数校验 -->
            <van-field
                v-model="loginData.submitForm.value4"
                name="asyncValidator"
                placeholder="异步函数校验"
                :rules="[{ validator: asyncValidator, message: '请输入正确内容' }]"
            />
          </van-collapse-item>
        </van-collapse>


      </van-cell-group>

      <div style="margin: 16px;">
        <van-button round block type="primary" @click="handleLogin">
          提交
        </van-button>
      </div>
    </van-form>

  <van-dialog v-model:show="dialogShow" :beforeClose="beforeClose"  showCancelButton cancelButtonText="否" confirm-button-text="是"
               >
    <template #title>
      <div style="padding: 20px 0;">
        是否确认提交
      </div>
    </template>


  </van-dialog>
    <input v-model="number11"  type="number"
           onkeypress="return(['e','E','-','+'].includes(event.key))?false:event.key"
           oninput="if(value>=10**3){value=value.slice(0,3)};if(value.indexOf('.')>0){value=value.slice(0,value.indexOf('.')+7)}" >

  <input v-model="number11"  type="number"
         onpaste="return !clipboardData.getData('text').match(/\D/)" ondragenter="return false"
         onkeypress="return(['e','E','-','+'].includes(event.key))?false:event.key"
         oninput="if(value>=10**3){value=value.slice(0,3)};if(value.indexOf('.')>0){value=value.slice(0,value.indexOf('.')+7)}" >


</template>

<script>
import {
  getCurrentInstance,
  onBeforeMount,
  onMounted,
  ref,
} from "vue"
import {Toast,Dialog} from 'vant'

import {loginData} from "./submit"

export default {
  name: 'teleport',
  setup() {
    const show = ref(false);
    const dialogShow = ref(false);
    const activeNames = ref(null);
    const submitForm = ref(null);
    const collapse = ref(null);
    const accordion = ref(false);
    const number11 = ref("");
    // collapse.value.toggleAll(true);
    // collapse.value.toggleAll(true);
    const currentInstance = getCurrentInstance();
    onBeforeMount(() => {
      activeNames.value = ['1', '2', "3", "4"];
      let errorShow = {//上传照片提示
        checkBox: false,
        instrumentStoreImg: false,//仪表门店照片
        userLicenseImg: false,//用户执照照片
        metersImg: true,//计量仪仪表照
        meterNameplateImg: false,//计量仪铭牌照
        meterInstallEnvirImg: false,//计量仪安装环境照片
        meterStatusImg: false,//计量仪仪表状态照片
        totalizerInstrumentImg: false,//积算仪仪表照片
        totalizerPressureSensorImg: false,//积算仪压力传感器照片
        controlValvesImg: false,//控制阀门仪表照片
        telephotoImg: false,//远传照片
        gasEquipImg: false,//用气设备照片
        gasEquipNameplateImg: false,//用气设备铭牌照片
        filterEquipImg: false,//过滤器设备照片
        filterNameplateImg: false,//过滤器铭牌照
      }
      for (let key in errorShow) {
        if(errorShow[key]){
          return Toast("dasd")
        }
        console.log(key, errorShow[key])
      }
      console.log("asd")
    })
    onMounted(() => {
      activeNames.value = "1";
      accordion.value = true;

    })

    const swiperleft=(e)=> {
      alert("32")
    }
    const openDialog = () => {
      show.value = true;

      setTimeout(() => { // 弹窗的显示时常
        show.value = false;
      }, 5000)
    }
    const beforeClose = (action) =>{
      console.log(action)
     return  new Promise((resolve) => {
        setTimeout(() => {
          if (action === 'confirm') {
            resolve(true);
          } else {
            // 拦截取消操作
            resolve(false);
          }
        }, 1000);
      });
    }

    const handleLogin = () => {
      console.log(loginData.submitForm)
      dialogShow.value=true


      // submitForm.value.validate().then(valid=>{
      //   console.log(valid);
      //   console.log("验证通过");
      //
      // }).catch(err=>{
      //   console.log(err,"验证失败");
      //
      // })

    }


    // const value1 = ref('');
    // const value2 = ref('');
    // const value3 = ref('abc');
    // const value4 = ref('');
    const pattern = /\d{6}/;

    // 校验函数返回 true 表示校验通过，false 表示不通过
    const validator = (val) => /1\d{10}/.test(val);

    // 校验函数可以直接返回一段错误提示
    const validatorMessage = (val) => `${val} 不合法，请重新输入`;

    // 校验函数可以返回 Promise，实现异步校验
    const asyncValidator = (val) =>
        new Promise((resolve) => {
          Toast.loading('验证中...');

          setTimeout(() => {
            Toast.clear();
            resolve(val === '1234');
          }, 1000);
        });

    const onFailed = (errorInfo) => {
      console.log('failed', errorInfo);
    };
    const onFailed1 = (errorInfo) => {
      console.log('1', errorInfo);
    };

    return {
      swiperleft,
      dialogShow,
      beforeClose,
      number11,
      show,
      pattern,
      accordion,
      onFailed,
      onFailed1,
      validator,
      activeNames,
      asyncValidator,
      validatorMessage,
      collapse,
      openDialog,

      loginData,
      submitForm,
      handleLogin,

    }
  }
}
</script>

<style scoped>
.modal-container {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 10px 20px;
  background: black;
  border-radius: 40px;
  opacity: 0.7;
  color: white;
  font: normal 16px/20px arial;
}
</style>